<template>
    <div>
        <div class="user-info-head" @click="editCropper()">
            <a-avatar :size="120" icon="user" :src="options.img"/>
        </div>
        <a-modal :title="title" v-model="open" width="800px" :footer="null" destroyOnClose>
            <a-row>
                <a-col :sm="24" :md="12" :style="{height: '350px'}">
                    <vue-cropper
                            ref="cropper"
                            :img="options.img"
                            :info="true"
                            :autoCrop="options.autoCrop"
                            :autoCropWidth="options.autoCropWidth"
                            :autoCropHeight="options.autoCropHeight"
                            :fixedBox="options.fixedBox"
                            @realTime="realTime"
                            v-if="visible"
                    />
                </a-col>
                <a-col :sm="24" :md="12" :style="{height: '350px'}">
                    <div class="avatar-upload-preview" style="text-align: center">
                        <img :src="previews.url" :style="previews.img" />
                    </div>
                </a-col>
            </a-row>
            <br />
            <a-row>
                <a-col :lg="2" :md="2">
                    <a-upload action="#" :customRequest="requestUpload" :showUploadList="false" :before-upload="beforeUpload">
                        <a-button size="small">
                            选择
                            <i class="a-icon-upload a-icon--right"></i>
                        </a-button>
                    </a-upload>
                </a-col>
                <a-col :lg="{span: 1, offset: 2}" :md="2">
                    <a-button icon="plus" size="small" @click="changeScale(1)"></a-button>
                </a-col>
                <a-col :lg="{span: 1, offset: 1}" :md="2">
                    <a-button icon="minus" size="small" @click="changeScale(-1)"></a-button>
                </a-col>
                <a-col :lg="{span: 1, offset: 1}" :md="2">
                    <a-button icon="undo" size="small" @click="rotateLeft()"></a-button>
                </a-col>
                <a-col :lg="{span: 1, offset: 1}" :md="2">
                    <a-button icon="redo" size="small" @click="rotateRight()"></a-button>
                </a-col>
                <a-col :lg="{span: 2, offset: 6}" :md="2">
                    <a-button type="primary" size="small" @click="uploadImg()">提 交</a-button>
                </a-col>
            </a-row>
        </a-modal>
    </div>
</template>

<script>
  import store from "@/store";
  import { VueCropper } from "vue-cropper";
  import { uploadAvatar } from "@/api/user";
  import {message} from "ant-design-vue";

  export default {
    components: { VueCropper },
    data() {
      return {
        // 是否显示弹出层
        open: false,
        // 是否显示cropper
        visible: true,
        // 弹出层标题
        title: "修改头像",
        options: {
          img: store.getters.avatar, //裁剪图片的地址
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 160, // 默认生成截图框宽度
          autoCropHeight: 200, // 默认生成截图框高度
          fixedBox: true // 固定截图框大小 不允许改变
        },
        previews: {}
      };
    },
    methods: {
      // 编辑头像
      editCropper() {
        this.open = true;
      },
      // 覆盖默认的上传行为
      requestUpload() {
      },
      // 向左旋转
      rotateLeft() {
        this.$refs.cropper.rotateLeft();
      },
      // 向右旋转
      rotateRight() {
        this.$refs.cropper.rotateRight();
      },
      // 图片缩放
      changeScale(num) {
        num = num || 1;
        this.$refs.cropper.changeScale(num);
      },
      // 上传预处理
      beforeUpload(file) {
        if (file.type.indexOf("image/") == -1) {
          this.$message.error("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
        } else {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            this.options.img = reader.result;
          };
        }
      },
      // 上传图片
      uploadImg() {
        this.$refs.cropper.getCropBlob(data => {
          let formData = new FormData();
          formData.append("avatarfile", data);
          uploadAvatar(formData).then(response => {
            this.open = false;
            this.options.img = response.imgUrl;
            store.commit('SET_AVATAR', this.options.img);
            this.$message.success("修改成功");
          });
        });
      },
      // 实时预览
      realTime(data) {
        this.previews = data;
      },
    }
  };
</script>
<style scoped lang="scss">
    .user-info-head {
        position: relative;
        display: inline-block;
        height: 120px;
    }

    .user-info-head:hover:after {
        content: '+';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        color: #eee;
        background: rgba(0, 0, 0, 0.5);
        font-size: 24px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        cursor: pointer;
        line-height: 110px;
        border-radius: 50%;
    }
    .avatar-upload-preview {
        position: absolute;
        top: 50%;
        transform: translate(50%, -50%);
        width: 200px;
        height: 200px;
        border-radius: 50%;
        box-shadow: 0 0 4px #ccc;
        overflow: hidden;
    }
</style>
